<style lang="less" scoped>
  @import './config.less';
</style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card>
          <div>
            <Tabs type="card"  @on-tab-remove="handleTabRemove" size="small" v-model="currentTabPane" :animated="false" @on-click="currentTabPaneChange">
               <Button v-checkPermission="'admin/Config/addGroup'" type="primary" size="small" @click="alertAdd" icon="md-add" slot="extra">{{ $t('add_button')+$t('config_group') }}</Button>
                <TabPane v-for="(itemGroup, i) in configGroup" :key="i" :label="itemGroup" closable>
                  <Form ref="currentConfigList" :model="currentConfigList"  :label-width="120" style="width: 666px">
                      <FormItem
                              v-for="(config, index) in currentConfigList.list"
                              :key="index"
                              :label="config.title"
                              :rules="config.rule">
                          <Row>
                              <Col span="10" >
                                  <Input  v-if="config.type=='text'" :disabled="config.disabled"  type="text" v-model="config.value" :placeholder="'请输入'+config.title" style="width: 200px"></Input>
                                  <DatePicker  v-if="config.type=='date'" :disabled="config.disabled"  type="date" v-model="config.value" placeholder="请选择日期" style="width: 200px"></DatePicker>
                                  <TimePicker  v-if="config.type=='time'" :disabled="config.disabled"  type="time" v-model="config.value" placeholder="请选择时间" style="width: 200px"></TimePicker>
                                  <DatePicker  v-if="config.type=='datetime'" :disabled="config.disabled"  type="datetime" v-model="config.value" placeholder="请选择日期时间" style="width: 200px"></DatePicker>
                                  <div v-if="config.type=='switch'" class="switch-box">
                                    <div class="mask" @click="handSwitch(index)"></div>
                                    <i-switch v-model="config.value">
                                      <span slot="open">开</span>
                                      <span slot="close">关</span>
                                    </i-switch>
                                  </div>
                              </Col>
                              <Col span="4" offset="1">
                                  <Button v-checkPermission="'admin/Config/delete'" style="margin-right: 5px;" size="small" :loading="delConfigLoading" @click="handleConfigRemove(index)"><Icon type="md-close" /></Button>
                                  <template v-if="['text','date','time','datetime','checkbox','radio'].indexOf(config.type) !== -1">
                                    <Button v-checkPermission="'admin/Config/edit'" size="small" v-if="config.disabled==true" @click="edit(index)"><Icon type="md-create" /></Button>
                                    <Button v-checkPermission="'admin/Config/edit'" size="small" v-if="config.disabled==false" :loading="editConfigLoading" @click="editSubmit(index)"><Icon type="md-checkmark" /></Button>
                                  </template>
                              </Col>
                          </Row>
                      </FormItem>
                      <FormItem>
                          <Row>
                              <Col span="4">
                                  <Button v-checkPermission="'admin/Config/add'" type="dashed" long @click="handleAdd" icon="md-add">{{ $t('add_button') }}</Button>
                              </Col>
                          </Row>
                      </FormItem>
                  </Form>
                </TabPane>
            </Tabs>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert"></Icon>
        <span>新增</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="120">
        <FormItem label="组中文名称" prop="title">
          <Input v-model="formItem.title" placeholder="请输入组中文名称"></Input>
        </FormItem>
        <FormItem label="组英文名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入组英文名称"></Input>
        </FormItem>
        <FormItem label="组描述" prop="description">
          <Input type="textarea" v-model="formItem.description" placeholder="请输入组描述"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
    <Modal v-model="addConfigModel.show" width="668" :styles="{top: '30px'}"  @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="information-circled"></Icon>
        <span>新增配置项</span>
      </p>
      <div>
          <Form ref="configItem" :model="configItem" :rules="addConfigValidate" :label-width="120"  label-position="left" >
            <FormItem label="输入框类型" prop="type" >
              <Select v-model='configItem.type'>
                <Option v-for="(itemType, i) in configInputTypeList" :value="i" :key="i">{{ itemType }}</Option>
              </Select>
            </FormItem>
            <FormItem label="中文名称" prop="title">
              <Input v-model='configItem.title'></Input>
            </FormItem>
            <FormItem label="英文名称" prop="name">
              <Input v-model='configItem.name'></Input>
            </FormItem>
            <FormItem label="预设值" prop="value">
              <Input v-model='configItem.value'></Input>
            </FormItem>
            <FormItem label="输入提示" prop="tip">
              <Input v-model='configItem.tip'></Input>
            </FormItem>
            <FormItem label="验证规则" prop="rule">
              <Input v-model='configItem.rule'></Input>
            </FormItem>
          </Form>
      </div>
      <p slot="footer">
         <Button type="text" @click="addConfigCancel" style="margin-right: 8px">取消</Button>
         <Button type="primary" @click="addConfigSubmit" :loading="addConfigModel.loading">确定</Button>
      </p>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'system_config',
  data () {
    return {
      currentTabPane: 0,
      currentConfigGroup: 'basic',
      currentConfigList: {},
      configGroup: {},
      configInputTypeList: {},
      // 配置项
      configItem: {
        type: 'text',
        title: '',
        name: '',
        value: '',
        tip: '',
        rule: ''
      },
      // 当前组的配置列表
      configList: {},
      // 弹出框
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      addConfigModel: {
        show: false,
        loading: false,
        index: 0
      },
      editConfigLoading: false,
      delConfigLoading: false,
      // 配置组
      formItem: {
        name: '',
        title: '',
        description: ''
      },
      addConfigValidate: {
        type: [{ required: true, message: '类型必选', trigger: 'change' }],
        title: [{ required: true, message: '中文名称不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '英文名称不能为空', trigger: 'blur' }]
      },
      ruleValidate: {
        name: [{ required: true, message: '组名称不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '组中文名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    currentTabPaneChange (name) {
      this.currentConfigGroup = Object.keys(this.configGroup)[name]
      this.currentConfigList = this.configList[this.currentConfigGroup]
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    handleAdd () {
      this.addConfigModel.show = true
    },
    handleConfigRemove (index) {
      let vm = this
      let item = vm.currentConfigList['list'][index]
      this.$Modal.confirm({
        title: '操作确认',
        content: '您确认要删除 “' + item.title + '” 配置项吗？',
        onOk: () => {
          let options = { url: 'Config/delete/' + (item.name), method: 'delete' }
          vm.delConfigLoading = true
          vm.$easyAjax(options).then(response => {
            if (response.data.code) {
              (vm.currentConfigList['list']).splice(index, 1)
            } else {
              vm.$Message.error(response.data.msg)
            }
            vm.delConfigLoading = false
          })
        },
        onCancel: () => {
          console.log('取消')
        }
      })
    },
    alertAdd () {
      this.modalSetting.show = true
    },
    handleTabRemove (index) {
      let vm = this
      let name = Object.keys(this.configGroup)[index]
      let options = { url: 'Config/delGroup/' + (name), method: 'delete' }
      vm.$easyAjax(options).then(response => {
        if (response.data.code <= 0) {
          vm.$Message.error(response.data.msg)
        } else {
          vm.$Message.success(response.data.msg)
        }
        setTimeout(function () {
          window.location.reload()
        }, 1000)
      })
    },
    addConfigSubmit () {
      let vm = this
      vm.addConfigModel.loading = true
      let data = vm.configItem
      data.group = vm.currentConfigGroup
      let options = { url: 'Config/add', data: data, method: 'post' }
      vm.$easyAjax(options).then(response => {
        if (response.data.code) {
          vm.getList()
          vm.addConfigCancel()
          vm.handleReset('configItem')
        } else {
          vm.$Message.error(response.data.msg)
        }
        vm.addConfigModel.loading = false
      })
    },
    edit (index) {
      let vm = this
      vm.currentConfigList['list'][index].disabled = false
    },
    editSubmit (index) {
      let vm = this
      let item = vm.currentConfigList['list'][index]
      let data = { name: item.name, value: item.value }
      let options = { url: 'Config/edit', data: data, method: 'put' }
      vm.editConfigLoading = true
      vm.$easyAjax(options).then(response => {
        if (response.data.code) {
          vm.$Message.success(response.data.msg)
          vm.currentConfigList['list'][index].disabled = true
        } else {
          vm.$Message.error(response.data.msg)
        }
        vm.editConfigLoading = false
      })
    },
    submit () {
      let vm = this
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          vm.modalSetting.loading = true
          let data = vm.formItem
          let options = { url: 'Config/addGroup', data: data, method: 'post' }
          vm.$easyAjax(options).then(response => {
            if (response.data.code) {
              vm.getList()
              vm.cancel()
              vm.handleReset('myForm')
            } else {
              vm.$Message.error(response.data.msg)
            }
            vm.modalSetting.loading = false
          })
        }
      })
    },
    cancel () {
      this.modalSetting.show = false
    },
    addConfigCancel () {
      this.addConfigModel.show = false
    },
    doCancel (data) {
      if (!data) {
        this.$refs['myForm'].resetFields()
        this.modalSetting.loading = false
        this.modalSetting.index = 0
      }
    },
    getList () {
      let vm = this
      let data = {}
      let options = { url: 'Config/index', data: data }
      vm.$easyAjax(options).then(response => {
        vm.configGroup = response.data.data.groupList
        vm.configList = response.data.data.siteList
        vm.configInputTypeList = response.data.data.typeList
        vm.currentConfigList = vm.configList[vm.currentConfigGroup]
      })
    },
    handSwitch (index) {
      let vm = this
      let item = vm.currentConfigList.list[index]
      let value = !item.value
      this.$Modal.confirm({
        title: '操作确认',
        content: '您确认要切换“' + item.title + '”状态吗？',
        onOk: () => {
          let data = { name: item.name, value: value }
          let options = { url: 'Config/edit', data: data, method: 'put' }
          vm.$easyAjax(options).then(response => {
            if (response.data.code) {
              item.value = value
              vm.currentConfigList.list[index] = item
            } else {
              vm.$Message.error(response.data.msg)
            }
          })
        },
        onCancel: () => {
          console.log('取消')
        }
      })
    }
  }
}
</script>
